<template>
<!--  <NavBar v-if="showNavBar"/>-->
  <div class="container">
    <div v-if="resourceType==='video'" class="video-component">
      <Video :resourceId="resourceId" />
    </div>
    <div v-if="resourceType==='text'" class="video-component">
      <Text :resourceId="resourceId" />
    </div>
    <div v-if="resourceType==='image'" class="video-component">
      <Image :resourceId="resourceId" />
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue';
import EducationBox from '@/components/EducationBox.vue';
import Video from '@/components/Video.vue'
import Recommend from "@/components/Recommend.vue";
import Text from "@/components/Text.vue";
import Image from "@/components/Image.vue";


export default {
  components: {
    NavBar,
    EducationBox,
    Video,
    Recommend,
    Text,
    Image
  },
  props: {
    // 是否显示导航栏
    showNavBar: {
      type: Boolean,
      default: true
    },
    resourceId: {
      type: Number,
      required: true
    },
    resourceType: {
      type: String,
      required: true
    }
  },
};
</script>

<style scoped>
/* 你可以根据需要添加样式 */
.container {
  display: flex;
  align-items: flex-start;
  padding: 20px; /* 根据需要调整内边距 */
  background-color: #dddddd; /* 根据需要添加背景色 */
}

.video-component {
  flex: 2; /* 视频组件占据3份空间 */
  margin-left: 10%;
  margin-right: 20px; /* 视频和推荐组件之间的间距 */
  border: 1px solid #e0e0e0; /* 根据需要添加边框 */
  border-radius: 8px; /* 根据需要添加圆角 */
  overflow: hidden; /* 确保内容不会溢出 */
  background-color: #ffffff; /* 根据需要添加背景色 */

}

.recommendation-component {
  flex: 1; /* 推荐组件占据剩余空间 */
  margin-right: 10%;
  border: 1px solid #e0e0e0; /* 根据需要添加边框 */
  border-radius: 8px; /* 根据需要添加圆角 */
  overflow: hidden; /* 确保内容不会溢出 */
  margin-left: 20px; /* 推荐组件的左边距 */
  background-color: #ffffff; /* 根据需要添加背景色 */
}
</style>
